<template>
  <div>
    <el-tabs v-model="activeIndex" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in tabList"
        :key="index"
        :label="item.label"
      ></el-tab-pane>
    </el-tabs>
    <div class="tabs-pane-content">
      <component :is="activeTab.component" v-bind="activeTab.props"></component>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // v-model 绑定，设置默认激活索引 和 获取当前激活索引，默认值 为 0
    value: {
      type: Number || String,
      default: 0,
    },
    tabList: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      activeIndex: '',
    }
  },
  created() {
    this.activeIndex = this.value
  },
  computed: {
    activeTab() {
      const activeTab = this.tabList[this.activeIndex]
      if (activeTab) return activeTab
      return {}
    },
  },
  methods: {
    handleClick(tab) {
      this.$emit('input', this.activeIndex)
    },
  },
}
</script>

<style scoped>
</style>